<template>
  <div>
    <el-card>
      <el-page-header
        icon=""
        content="菜单管理"
        title="配置管理"
        class="page_header"
      ></el-page-header>
      <div class="searchReset">
        <el-form
          :inline="true"
          ref="searchFormRef"
          :model="searchForm"
          class="demo-form-inline"
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="菜单名称">
                <el-input
                  v-model="searchForm.name"
                  placeholder="支持菜单名称模糊查询"
                  clearable
                  @keyup.enter="getTableData()"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6"></el-col>
            <el-col :span="6"></el-col>
            <el-col :span="6">
              <div style="float: right; margin-right: 33px">
                <el-button type="primary" @click="getTableData()"
                  >查询</el-button
                >
                <el-button @click="handleReset()">重置</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="button_right">
        <el-button
          type="primary"
          @click=";(dialogVisible = true), (type = 'add')"
        >
          新增菜单
        </el-button>
      </div>
      <el-table
        show-overflow-tooltip
        stripe
        :data="tableData"
        style="width: 100%; height: 500px"
        :header-cell-style="{ background: '#E7E7E7' }"
      >
        <el-table-column prop="name" label="菜单名称" />
        <el-table-column prop="path" label="菜单路由"> </el-table-column>
        <el-table-column prop="component" label="文件路径" />
        <el-table-column
          prop="creater"
          label="创建者"
          width="100px"
        ></el-table-column>
        <el-table-column prop="editTime" label="更新时间">
          <template #default="scope">
            {{ formatTime.getTime(scope.row.editTime) }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          header-align="center"
          width="110"
        >
          <template #default="scope">
            <!-- // 编辑 -->
            <el-button
              circle
              :icon="Edit"
              @click="handleEdit(scope.row)"
            ></el-button>
            <!-- // 删除 -->
            <el-popconfirm
              title="确定要删除吗?"
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleDelete(scope.row)"
            >
              <template #reference>
                <el-button circle :icon="Delete" type="danger"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      v-model="dialogVisible"
      :title="type === 'edit' ? '编辑菜单' : '新增菜单'"
      width="700px"
    >
      <el-form
        :inline="true"
        ref="FormRef"
        :model="formInline"
        :rules="formRules"
        class="demo-form-inline"
      >
        <el-form-item label="菜单名称" prop="name">
          <el-input
            v-model="formInline.name"
            placeholder="请输入菜单名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="菜单路由" prop="path">
          <el-input
            v-model="formInline.path"
            placeholder="请输入菜单路由"
            clearable
          />
        </el-form-item>
        <el-form-item label="文件路径" prop="component">
          <el-input
            v-model="formInline.component"
            placeholder="请输入文件路径"
            clearable
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm()"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref, onMounted, reactive } from 'vue'
import formatTime from '@/util/formatTime'
import { View, Edit, Delete, CaretBottom } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const store = useStore()

const router = useRouter()

const tableData = ref([])

const FormRef = ref()
const searchFormRef = ref()

const type = ref('')

const dialogVisible = ref(false)

const searchForm = ref({
  name: ''
})

const basicForm = reactive({
  name: '',
  path: '',
  component: '',
  creater: store.state.userInfo.userName
})

const formInline = reactive({
  name: '',
  path: '',
  component: '',
  creater: store.state.userInfo.userName
})

const formRules = reactive({
  name: [
    {
      required: true,
      // pattern: /0\d{2,3}-\d{7,8}/,
      message: '请输入菜单名称',
      trigger: 'blur'
    }
  ],
  path: [{ required: true, message: '请输入菜单路径', trigger: 'blur' }],
  component: [{ required: true, message: '请输入文件路径', trigger: 'blur' }]
})

onMounted(() => {
  getTableData()
})
const handleEdit = (row) => {
  dialogVisible.value = true
  type.value = 'edit'
  formInline.name = row.name
  formInline.path = row.path
  formInline.component = row.component
  formInline._id = row._id
}
const submitForm = () => {
  if (type.value === 'add') {
    FormRef.value.validate(async (valid) => {
      if (valid) {
        console.log('formInline', formInline)
        const res = await axios.post('/adminApi/user/addMenu', formInline)
        if (res.data.code == '0000') {
          ElMessage.success(res.data.msg)
          dialogVisible.value = false
          await getTableData()
        }
      }
    })
  } else {
    FormRef.value.validate(async (valid) => {
      if (valid) {
        console.log('formInline', formInline)

        const res = await axios.post('/adminApi/user/updateMenu', formInline)
        if (res.data.code == '0000') {
          ElMessage.success(res.data.msg)
          dialogVisible.value = false
          await getTableData()
        }
      }
    })
  }
}

const getTableData = async () => {
  // console.log(searchForm.value.name);
  const res = await axios.post('/adminApi/user/menu', searchForm.value)
  if (res.data.code === '0000') {
    tableData.value = res.data.data
  }
}

const handleReset = async () => {
  searchForm.value.name = ''
  await getTableData()
}

const handleDelete = async (item) => {
  console.log(item)
  const res = await axios.delete(`/adminApi/user/menu/${item._id}`)
  if (res.data.code === '0000') {
    ElMessage.success(res.data.msg)
    await getTableData()
  }
}
</script>

<style scoped lang="scss">
.page_header{
  padding-bottom: 18px;
  border-bottom: 1px solid #dadada;
}
.el-table {
  margin-top: 10px;
}
::v-deep .htmlcontent {
  img {
    max-width: 100%;
  }
}
.button_right {
  display: flex;
  justify-content: flex-start;
}
.searchReset{
  margin-top: 20px;
}
</style>
